<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传文件</title>
    <style>
        .filebox {
            height: 180px;
        }
        .bar {
            height: 18px;
            background: green;
        }
    </style>

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
</head>
<body>
    <div id="app">
        <upload></upload>
    </div>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>
<script src="/s/js/plupload.full.min.js"></script>
<script type="text/x-template" id="up">
    <div>
        <div class="filebox" id="file-list"> </div> <div> <a href="javascript:" id="file-btn"> + 上传文件</a> </div>
    </div>
</script>
<script>
    // http://chaping.github.io/plupload/doc/
    Vue.component('upload', {
        template: '#up',
        mounted: function() {
            var voucheruploader = new plupload.Uploader({
                    runtimes: 'html5,html4',
                    browse_button :"file-btn",
                    url : '/upload',
                    unique_names: true,
                    filters : {
                        max_file_size : '10mb',
                        mime_types: [
                            {title : "files", extensions : "jpg,gif,jpe?g,png,PNG,pdf,zip,rar,XLSX,PDF,DOC"
                            +",JPG,AVI,RAR,WAV,LOG,TIF,WPS,WMA,XLS,MP4,TXT,FLAC,SWF,DOCX,MOV,CSV,OGG,AAC,AMR,EML,M4A,HTML,GIF,MP3,PIC"}
                        ]
                    },
                    init: {
                        FilesAdded: function(up, files) {
                            console.log(files, files[0])
                            voucheruploader.start();
                            for(var i = 0, len = files.length; i<len; i++){
                                var file_name = files[i].name; //文件名
                                //构造html来更新UI
                                var html = '<li id="file-' + files[i].id +'"><p class="file-name">' + file_name + '</p><p class="progress"></p></li>';
                                $(html).appendTo('#file-list');
                                !function(i){
                                    previewImage(files[i],function(imgsrc){
                                        $('#file-'+files[i].id).append('<img src="'+ imgsrc +'" />');
                                    })
                                }(i);
                            }
                        },
                        FileUploaded: function(up, file, info) {
                            var data = JSON.parse(info.response);
                            console.log(data, info, file)
                        },
                        UploadProgress: function(up, file) {
                            console.log(file.id, file.percent)
                        },
                        Error: function(up, err) {
                            console.log(err.code + ":" + err.message)
                        }
                    }
            });
            voucheruploader.init();
        }
    })

    new Vue({
        el: '#app'
    });


    function previewImage(file, callback){ 
		if(!file || !/image\//.test(file.type)) return;
		if(file.type=='image/gif'){
			var fr = new mOxie.FileReader();
			fr.onload = function(){
				callback(fr.result);
				fr.destroy();
				fr = null;
			}
			fr.readAsDataURL(file.getSource());
		}else{
			var preloader = new mOxie.Image();
			preloader.onload = function() {
				preloader.downsize( 300, 300 );
				var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL();
				callback && callback(imgsrc);
				preloader.destroy();
				preloader = null;
			};
			preloader.load( file.getSource() );
		}	
	}
</script>
</body>
</html>